import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
import { AppOutline, BillOutline, UnorderedListOutline,  ShopbagOutline, UserOutline } from 'antd-mobile-icons';
import "../styles/MyTabbar.css"
import { withRouter } from 'react-router-dom'

// @withRouter
class MyTabbar extends Component {
    constructor(props){
        super(props);
        this.state = {
            tabs:[
                {
                    key: '/index/home',
                    title: '店铺',
                    icon: <AppOutline />
                },
                {
                    key: '/index/cate',
                    title: '分类',
                    icon: <BillOutline />
                },
                {
                    key: '/index/allgood',
                    title: '所有商品',
                    icon: <UnorderedListOutline />
                },
                {
                    key: '/index/shopcart',
                    title: '购物车',
                    icon: <ShopbagOutline />
                },
                {
                    key: '/index/mine',
                    title: '我的',
                    icon: <UserOutline />
                },
            ],
            activeKey:'/index/home',
        }
    }
    handleChange(key){
        console.log(key);
        this.props.history.push({pathname:key,state:{id:282657}});
        this.setState({activeKey: key});
    }
    render() {
        return (
            <div className='mytabbar'>
                 <TabBar activeKey={this.state.activeKey} onChange={(key)=>{ this.handleChange(key) }} >
                    {
                        this.state.tabs.map(item => (
                            // <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title}></TabBar.Item>
                        ))
                    }
                </TabBar>
            </div>
        );
    }
}
//withRouter是react-router-dom实现的一个高阶组件,专门用来给没有location,history,match这三个路由对象的组件 添加这三个路由
export default withRouter(MyTabbar);